<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{~/css/index.css}">
    <script src="outjs.js" th:src="@{~/js/index.js}"></script>
</head>
<body onload="checkCookies()">

<br>/*********************1-1*************************/<br>
JavaScript 能够直接写入 <strong>HTML </strong>输出流中：</p>
<script>
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph.</p>");
</script>

<p>/*********************1-2*************************/</p>
<button type="button" onclick="alert('Welcome!')">点击提示 Welcome</button>

<p>/*********************1-3*************************/</p>
<p id="changeText">
    JavaScript 能改变 HTML 元素的内容。
</p>

<script>
    function changeTextFun() {
        x = document.getElementById("changeText");  // 找到元素
        x.innerHTML = "改变之后的内容:Hello JavaScript!";    // 改变内容
    }
</script>

<script>
    function changeColorFun(count) {
        x = document.getElementById("changeText") // 找到元素
        //var aaa = count;
        //var bbb = aaa.toString(16);
        x.style.color = "#" + count;          // 改变样式
        //x.innerHTML = "#" + count;
    }
</script>

<button type="button" onclick="changeTextFun()">点击改变内容</button>
<button type="button" onclick="changeColorFun('00ff00')">变色1</button>
<button type="button" onclick="changeColorFun('0000ff')">变色2</button>

<p>/*********************1-4*************************/</p>
<input id="inputNum" type="text">

<script>
    function isNumberFun() {
        var x = document.getElementById("inputNum").value;
        if (x == "" || isNaN(x)) {
            alert("Not Numeric");
        } else {
            alert("输入了" + x);
        }
    }
</script>

<button type="button" onclick="isNumberFun()">确认</button>

<p>/*********************1-5*************************/</p>
<p id="outJsText">
    JavaScript 能改变 HTML 元素的内容。
</p>
<button type="button" onclick="outJsFun()">外部JS方法</button>

<p>/*********************2-1*************************/</p>
<script>
    person = new Object();
    person.firstname = "Bill";
    person.lastname = "Gates";
    person.age = 56;
    person.eyecolor = "blue";
    var x = (person.firstname + " is " + person.age + " years old.").toUpperCase();
    document.write(x);
</script>

<p>/*********************2-2*************************/</p>
<p id="sum"></p>
<script>
    function myFunction(a, b) {
        return a * b;
    }

    document.getElementById("sum").innerHTML = myFunction(4, 3);
</script>

<p>/*********************2-3*************************/</p>
<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="forFun()">点击这里</button>
<p id="for"></p>
<p id="for2"></p>
<script>
    function forFun() {
        var x = "";
        var y = 0;
        var arr = [1, 2, 3, 4, 7];
        for (var i = 0; i < 5; i++) {
            x = x + "The number is " + i + "<br>";
        }
        document.getElementById("for").innerHTML = x;
        for (k in arr) {
            y += arr[k]
        }
        document.getElementById("for2").innerHTML = "[1,2,3,4,7]加起来 = " + y;
    }
</script>

<p>/*********************2-4*************************/</p>
<script>
    function changetext(id) {
        id.innerHTML = "改变当前文本,谢谢! 当前时间:" + Date();
    }
</script>
<h1 onclick="changetext(this)">请点击该文本</h1>

<p>/*********************2-5*************************/</p>
<p id="cookies">11111</p>
<script>
    function checkCookies() {
        document.getElementById("cookies").innerHTML = "浏览器已启用 cookies = " + navigator.cookieEnabled;
    }
</script>

<p>/*********************2-6*************************/</p>
<script>
    function upperCaseFun() {
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
</script>
请输入英文字符：<input type="text" id="fname" onchange="upperCaseFun()">

<p>/*********************2-7*************************/</p>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" onmousedown="mDown(this)" onmouseup="mUp(this)"
     style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面
</div>
<script>
    function mOver(obj) {
        obj.innerHTML = "谢谢"
    }

    function mOut(obj) {
        obj.innerHTML = "把鼠标移到上面"
    }

    function mUp(obj) {
        obj.style.backgroundColor = "green";
        obj.innerHTML = "请按下鼠标按钮"
    }

    function mDown(obj) {
        obj.style.backgroundColor = "#1ec5e5";
        obj.innerHTML = "请释放鼠标按钮"
    }
</script>

<p>/*********************2-8*************************/</p>
<div id="div1">
    <p id="p1">元素11111</p>
    <p id="p2">元素22222</p>
</div>

<script>
    //删除元素方法1:
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);

    //删除元素方法2:
    /*var child=document.getElementById("p1");
    child.parentNode.removeChild(child);*/
</script>

<p>/*********************2-8*************************/</p>
<button onclick="confirmDialog()">弹个文本</button>
<script>
    function confirmDialog() {
        //alert("文本")
        //confirm("文本")
        prompt("文本","默认值")
    }
</script>

</body>
</html>